<template>
  <view class="banner">
    <custom-head-top>
      <template #left>首页海报</template>
      <template #right>
        <button type="primary" size="mini" @click="handleAdd">
          <uni-icons type="plusempty" size="14" color="#fff"></uni-icons>
          新增海报
        </button>
        <button
          type="warn"
          size="mini"
          @click="handleDelete(ids)"
          :disabled="ids.length == 0"
        >
          <uni-icons
            type="trash"
            size="14"
            :color="ids.length == 0 ? 'rgba(255,255,255,0.6)' : '#fff'"
          ></uni-icons>
          批量删除
        </button>
      </template>
    </custom-head-top>
    <view class="main">
      <uni-table
        ref="tableRef"
        border
        stripe
        emptyText="暂无数据"
        type="selection"
         @selection-change="selectChange"
      >
        <uni-tr>
          <uni-th align="left" width="180">缩略图</uni-th>
          <uni-th align="left">排序</uni-th>
          <uni-th align="left" width="90">跳转地址</uni-th>
          <uni-th align="left" width="80">跳转方式</uni-th>
          <uni-th align="left" >appid</uni-th>
          <uni-th align="left" >是否启用</uni-th>
          <uni-th align="left" >发布者</uni-th>
          <uni-th align="left" >发布时间</uni-th>
          <uni-th align="left" width="160">操作</uni-th>
        </uni-tr>
        <uni-tr v-for="item in bannerList" :key="item._id">
          <uni-td>
            <image
              class="thumb"
              :src="getSmallImage(item.picurl,200)"
              @click="previewImage(item.picurl)"
              mode="aspectFill"
            ></image>
          </uni-td>
          <uni-td>{{ item.sort }}</uni-td>
          <uni-td>{{ item.url }}</uni-td>
          <uni-td>
            <uni-tag inverted :text="item.target == 'self' ? '站内' : '站外'" :type="item.target == 'self' ? 'primary' : 'warning'" />

          </uni-td>
          <uni-td>{{ item.appid }}</uni-td>
          <uni-td>
            <switch
              class="switch-btn"
              :checked="item.checked"
              @change="handleEnableChange($event, item._id)"
          /></uni-td>
          <uni-td>{{ item.nickname }}</uni-td>
          <uni-td>{{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}</uni-td>
          <uni-td>
            <view class="operate-btn">
              <button type="primary" size="mini" @click="handleEdit(item)">
                修改
              </button>
              <button  type="warn" size="mini" @click="handleDelete([item._id])">
                删除
              </button>
            </view>
          </uni-td>
        </uni-tr>
      </uni-table>
      <bannerPopup ref="bannerPopupRef" @getList="getList" :type="type" :maxSort="bannerList[bannerList.length - 1]?.sort" />
    </view>
  </view>
</template>

<script setup>
import customHeadTop from '@/components/cunstom-head-top/custom-head-top.vue';
import { ref, onMounted ,nextTick} from 'vue';
import { getSmallImage } from '@/utils/tools';
import { previewImage ,showModal,showToast} from '@/utils/common';
import bannerPopup from './children/bannerPopup.vue';
import dayjs from 'dayjs';
const activityCloudObj = uniCloud.importObject('admin-activity-obj');
const tableRef = ref(null);
const bannerPopupRef = ref(null);

const bannerList = ref([]);
const ids = ref([]);
const selectChange = (e) => {
  ids.value = e.detail.index.map((i) => {
    return bannerList.value[i]._id;
  });
};
const handleAdd = () => {
  bannerPopupRef.value.open();
};
const type = ref('add');

const handleEdit = (item) => {
  type.value = 'edit';
  nextTick(() => {  
    bannerPopupRef.value.open(item);
  });
};

const handleDelete = async (id) => {
  if (id.length == 0) {
    showToast({
      title: '请选择要删除的分类',
    });
    return;
  }
  const res = await showModal({
    content: '确定删除该分类吗？',
  });
  if (res === 'confirm') {
    const res2 = await activityCloudObj.bannerRemove(id);
    if (res2.errCode == 0) {
      showToast({
        title: '删除成功',
      });
      ids.value = [];
      setTimeout(() => {
        getList();
      }, 1000);
    }else{
      showToast({
        title: res2.errMsg,
      });
    }
  } 
};

const getList = async () => {
  uni.showLoading({
    title: '加载中',
    mask: true,
  });

  const res = await activityCloudObj.bannerList();
  if (res.errCode == 0) {
    bannerList.value = res.data;
  } else {
    showToast({
      title: res.errMsg,
    });
  }
};

const handleEnableChange = async (e, _id) => {
  const res = await activityCloudObj.bannerUpdate({
    _id,
    checked: e.detail.value,
  });
  if (res.errCode == 0) {
    showToast({ title: '修改成功' });

    setTimeout(() => {
      getList();
    }, 1000);
  }else{
    showToast({ title: res.errMsg });
  }
};
onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.banner {
  .main {
    padding: 20rpx;
    .thumb {
      width: 150px;
      height: 80px;
      border-radius: 3px;
      overflow: hidden;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
